<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>animation</title>
        <style>
            @keyframes move {
                0%{left:0%;}
                100%{left:50%;}
            }
            @-webkit-keyframes move{
                0%{left:0%;}
                100%{left:50%;}
            }
            div{
                width:100px;
                height:100px;
                background-color: darkgreen;
                color:white;
                position: absolute;
                animation-name: move;
                animation-duration: 2s;
            }
        </style>
    </head>
    <body>
        <div id="div1">刷新我就动起来了</div>
    </body>
</html>